<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>3D预览</title>
		<meta http-equiv="X-UA-Compatible" content="chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="alternate icon" type="image/png" href="/assets/i/favicon.png">
		<link rel="stylesheet" href="/assets/css/amazeui.min.css" />
		<link rel="stylesheet" href="/assets/css/app.css" />
	</head>

	<body>
		<script src="/preview/WebGLViewer/threejs/three.min.js"></script>
		<script src="/preview/WebGLViewer/threejs/loaders/STLLoader.js"></script>
		<script src="/preview/WebGLViewer/threejs/OrbitControls.js"></script>

		<script>
			var container;

			var camera, cameraTarget, scene, renderer;

			var cameraType = 1;
			var perspectiveAngle = 45;
			var cameraPosX = 200;
			var cameraPosY = 200;
			var cameraPosZ = 200;
			var cameraTargetX = 0;
			var cameraTargetY = 0;
			var cameraTargetZ = 0;
			var upVectorX = 0;
			var upVectorY = 1;
			var upVectorZ = 0;
			var cameralScale = 5;

			window.onload = function() {

				init();
				animate();
			}

			function getQueryStringByName(name) {
				var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));

				if(result == null || result.length < 1) {
					return "";
				}

				return result[1];
			}

			function init() {

				container = document.createElement('div');

				//container = document.getElementById("showchat");
				//console.log("container = " + container);
				document.body.appendChild(container);

				// set camera
				var cameraTypeStr = getQueryStringByName('cameraType');
				cameraType = cameraTypeStr == "" ? cameraType : parseInt(cameraTypeStr);

				var perspectiveAngleStr = getQueryStringByName('perspectiveAngle');
				perspectiveAngle = perspectiveAngleStr == "" ? perspectiveAngle : parseFloat(perspectiveAngleStr);

				var cameraPosXStr = getQueryStringByName('cameraPosX');
				cameraPosX = cameraPosXStr == "" ? cameraPosX : parseFloat(cameraPosXStr) * cameralScale;

				var cameraPosYStr = getQueryStringByName('cameraPosY');
				cameraPosY = cameraPosYStr == "" ? cameraPosY : parseFloat(cameraPosYStr) * cameralScale;

				var cameraPosZStr = getQueryStringByName('cameraPosZ');
				cameraPosZ = cameraPosZStr == "" ? cameraPosZ : parseFloat(cameraPosZStr) * cameralScale;

				var cameraTargetXStr = getQueryStringByName('cameraTargetX');
				cameraTargetX = cameraTargetXStr == "" ? cameraTargetX : parseFloat(cameraTargetXStr) * cameralScale;

				var cameraTargetYStr = getQueryStringByName('cameraTargetY');
				cameraTargetY = cameraTargetYStr == "" ? cameraTargetY : parseFloat(cameraTargetYStr) * cameralScale;

				var cameraTargetZStr = getQueryStringByName('cameraTargetZ');
				cameraTargetZ = cameraTargetZStr == "" ? cameraTargetZ : parseFloat(cameraTargetZStr) * cameralScale;

				var upVectorXStr = getQueryStringByName('upVectorX');
				upVectorX = upVectorXStr == "" ? upVectorX : parseFloat(upVectorXStr) * cameralScale;

				var upVectorYStr = getQueryStringByName('upVectorY');
				upVectorY = upVectorYStr == "" ? upVectorY : parseFloat(upVectorYStr) * cameralScale;

				var upVectorZStr = getQueryStringByName('upVectorZ');
				upVectorZ = upVectorZStr == "" ? upVectorZ : parseFloat(upVectorZStr) * cameralScale;

				if(cameraType == 0) {
					camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 10000);
				} else {
					camera = new THREE.PerspectiveCamera(perspectiveAngle, window.innerWidth / window.innerHeight, 1, 10000);
				}

				camera.position.set(cameraPosX, cameraPosY, cameraPosZ);
				camera.up.set(upVectorX, upVectorY, upVectorZ);

				cameraTarget = new THREE.Vector3(cameraTargetX, cameraTargetY, cameraTargetZ);
				camera.lookAt(cameraTarget);

				scene = new THREE.Scene();
				scene.fog = new THREE.Fog(0xffffff, 1, 10000);

				// load file

				var loader = new THREE.STLLoader();

				var modelName = getQueryStringByName('modelName');
				if(null == modelName) {
					modelName = "porsche.stl";
				}

				loader.load('/preview/Models/' + modelName, function(geometry) {

					var material = new THREE.MeshPhongMaterial({
						color: 0x808080,
						specular: 0x111111,
						shininess: 200
					});
					var mesh = new THREE.Mesh(geometry, material);

					mesh.castShadow = true;
					mesh.receiveShadow = true;

					scene.add(mesh);

				});

				// lights

				scene.add(new THREE.AmbientLight(0x333333));

				addDirectionalLight(-1, 1, 1, 0xFFFFFF, 1.35);
				addDirectionalLight(1, -1, -1, 0xFFFFFF, 1);

				// renderer

				renderer = new THREE.WebGLRenderer({
					antialias: true
				});
				renderer.setClearColor(scene.fog.color);
				renderer.setSize(window.innerWidth, window.innerHeight);

				renderer.gammaInput = true;
				renderer.gammaOutput = true;

				renderer.shadowMapEnabled = true;
				renderer.shadowMapCullFace = THREE.CullFaceBack;

				container.appendChild(renderer.domElement);

				// orbit control

				control = new THREE.OrbitControls(camera, renderer.domElement);

				// events

				window.addEventListener('resize', onWindowResize, false);
			}

			function addDirectionalLight(x, y, z, color, intensity) {

				var directionalLight = new THREE.DirectionalLight(color, intensity);
				directionalLight.position.set(x, y, z)
				scene.add(directionalLight);
			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				//renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setSize(500, 500);

			}

			function animate() {

				requestAnimationFrame(animate);

				render();
			}

			function render() {

				//				var timer = Date.now() * 0.0005;
				//
				//				camera.position.x = Math.cos( timer ) * 3;
				//				camera.position.z = Math.sin( timer ) * 3;

				renderer.render(scene, camera);
			}
		</script>

	</body>

</html>